<template>
	<div class="delegation">
		<div :class="['delegation-layout-header', isSysAdmin ? '' : 'notSysAdmin']">
			<div class="header-header">
				<a-breadcrumb :class="isSysAdmin ? 'isSysAdmin' : ''">
					<a-breadcrumb-item style="font-weight: bold; font-size: 16px">
						{{ $t('delegate.delegate', '委托授权') }}
					</a-breadcrumb-item>
				</a-breadcrumb>
				<a-menu
					class="menu-box-delegation"
					mode="horizontal"
					@click="handleChangeRoute"
					v-if="isSysAdmin"
				>
					<a-menu-item
						v-for="item in menus"
						:key="item.menu_id"
						class="menu-box-item"
						:class="{ 'menu-active': selectedKeys === item.menu_id }"
					>
						<div class="item-text">
							<EllipsisTooltip :title="item.menu_name" />
						</div>
					</a-menu-item>
				</a-menu>				
			</div>	
			<div
				:class="[
					'delegation-layout-header-botton',
					isSysAdmin ? 'isSysAdmin' : '',
				]"
				v-if="selectedKeys === 'creat_byme'"
			>
				<a-button type="primary" @click="goPlaybackRate">
					{{ $t('delegate.add', '新增') }}
				</a-button>
				<a-button style="margin: 0px 12px" @click="goHistoricalRecords">
					{{ $t('delegate.historyList', '历史数据') }}
				</a-button>
			</div>
		</div>

		<a-spin
			:spinning="spinningList"
			style="top: 0"
			v-if="selectedKeys === 'creat_byme'"
		>
			<div v-if="!informationdata.length" class="detegation-empty">
				<a-empty />
			</div>
			<div v-show="informationdata.length" class="delegation-layout">
				<delegation-card
					:information="informationdata"
					@cardClick="cardClick"
					@currentListenerList="currentListenerList"
				></delegation-card>
				<msapplication-task
					:set-mandate-data="setMandateData"
					:status="status"
					:spinning="spinning"
				></msapplication-task>
			</div>
		</a-spin>
		<proxy-creation v-if="selectedKeys === 'creat_byother'" />
	</div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, computed } from 'vue'
import DelegationCard from './component/DelegationCard.vue'
import MsapplicationTask from './component/MsapplicationTask.vue'
import EllipsisTooltip from '@/entry_desktop/components/EllipsisTooltip'
import { i18n } from '@/locales'
import { apiInit } from '@/services' //引入接口
import { useRoute, useRouter } from 'vue-router'
import { ColSize } from 'ant-design-vue/lib/grid/Col'
import { useStore } from 'vuex'
import ProxyCreation from './ProxyCreation.vue'

export default defineComponent({
	components: {
		DelegationCard,
		EllipsisTooltip,
		MsapplicationTask,
		ProxyCreation,
	},
	setup() {
		const { $t } = i18n
		const store = useStore()
		// 是否是管理员
		const isSysAdmin = store.state.userInfo.sys_admin
		let menus = []
		if (isSysAdmin) {
			menus.push(
				{
					menu_name: $t('delegate.delegate', '我创建的'),
					menu_id: 'creat_byme',
				},
				{
					menu_name: $t('delegate.delegateCreate', '代理创建'),
					menu_id: 'creat_byother',
				}
			)
		}
		const api = apiInit()
		const router = useRouter()
		const route = useRoute()
		const selectedKeys = ref(
			isSysAdmin
				? route.query.tab
					? route.query.tab
					: 'creat_byme'
				: 'creat_byme'
		)
		const informationdata: any = ref([])
		const setMandateData: any = ref([])
		const status: any = ref('')
		const spinning = ref<boolean>(false)
		const spinningList = ref<boolean>(false)
		// 菜单变更
		const handleChangeRoute = ({ key }: layout.ChangeRouteParam) => {
			selectedKeys.value = key
			router.push({
				name: 'delegation',
				query: {
					tab: key,
				},
			})
		}
		//委托授权列表
		const currentListenerList = async () => {
			spinningList.value = true
			const { data, code } =
				await api.delegateAuto.ListDelegatePrivateV3Ego_apiPOST({})
			if (code === '000000') {
				spinningList.value = false
				informationdata.value = data
			}
		}
		//委托任务详情
		const mandateForLegislator = async (id: string) => {
			spinning.value = true
			const { data, code } =
				await api.delegateAuto.GetDelegatePrivateV3Ego_apiPOST({
					payload: { id },
				})
			if (code === '000000') {
				let dataArray: any = []
				let datas: any = data
				dataArray = datas?.process_list
				spinning.value = false
				return dataArray
			}
		}

		//获得委托任务详情
		const cardClick = async (row: any) => {
			setMandateData.value = await mandateForLegislator(row?.id)
			status.value = row?.status
		}
		//跳转到首页
		const goHome = () => {
			router.go(-1)
		}
		//跳转历史数据
		const goHistoricalRecords = () => {
			router.push({
				name: 'history_dataset_associations',
			})
		}
		//跳转新增
		const goPlaybackRate = () => {
			router.push({
				name: 'add_delegation',
				query: {
					from: 'creat_byme',
				},
			})
		}
		const isSysAdminTop = computed(() =>
			store.state.tenant?.tenant_auth?.app_launcher === 1 ? 0 : '65px'
		)
		const menuTop = computed(() =>
			store.state.tenant?.tenant_auth?.app_launcher === 1 ? 0 : '65px'
		)

		onMounted(() => {
			currentListenerList()
		})
		return {
			menus,
			isSysAdmin,
			handleChangeRoute,
			selectedKeys,
			currentListenerList,
			informationdata,
			setMandateData,
			status,
			cardClick,
			goHome,
			goHistoricalRecords,
			goPlaybackRate,
			spinning,
			spinningList,
			isSysAdminTop,
			menuTop,
		}
	},
})
</script>
<style lang="less">
.delegation {
	width: 100%;
	margin-top: -6px;
	.detegation-empty {
		height: calc(100vh - 180px);
		display: flex;
		flex-flow: column;
		justify-content: center;
	}
	.delegation-layout-header {
		margin-bottom: 6px;
		&:has(+ div.ant-spin-nested-loading) {
			margin-bottom: 10px;
		}
		&.notSysAdmin {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 10px;
		}
	}
	.menu-box-delegation {
		// margin-top: 10px;
		display: flex;
		width: calc(100% - 140px);
		flex: 1;
		height: 50px;
		border-bottom: none;
		// margin-top: -10px;
		padding-top: 10px;
		padding-left: 24px;
		&-item {
			padding: 0;
			display: flex;
			height: 100%;
			color: @rok-text-color-secondary;
			font-weight: @rok-font-weight-bold;
			font-size: @rok-font-size-title;
			border-bottom: none;
			cursor: pointer;
			border-bottom: none !important;
			&:hover {
				color: @rok-primary-color;
				border-bottom: none;
			}
			&.ant-menu-item-selected {
				border-bottom: none;
			}
			.item-text {
				height: 54px;
				min-width: 72px;
				max-width: 316px;
				line-height: 48px;
				text-align: center;
			}
			.item-before,
			.item-after {
				visibility: hidden;
				img {
					margin-top: -1px;
					width: 48px;
					height: 55px;
				}
			}
		}
		.ant-menu-overflowed-submenu {
			border-bottom: none;
			color: @rok-text-color;
		}
	}
	.menu-box-item {
		margin-right: 42px;
	}
	.menu-active {
		.item-text {
			.tooltip-content {
				font-weight: 600 !important;
			}
			position: relative;
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 8px;
				width: 26px;
				height: 4px;
				background-color: #4c78fc;
				border-radius: 2px;
			}
		}
	}
	.delegation-layout {
		width: 100%;
		display: flex;
		justify-content: space-between;
		.delegation-layout-sider {
			width: 340px;
			background: transparent;
		}
	}
}
</style>
<style lang="less" scoped>
.delegation {
	.header-header{
		display: flex;
		// width: 100vw;
		justify-content: flex-start;
		transform: translateX(-36px);
	}

	/deep/ .ant-breadcrumb {
		padding-left: 36px;
		&.isSysAdmin {
			height: 50px;
			line-height: 50px;
			background-color: #fff;
			// width: 100vw;
			// position: absolute;
			// left: 0;
			top: v-bind(isSysAdminTop);
			
		}
	}
	
	/deep/ .ant-menu {
		// position: absolute;
		// left: 140px;
		top: v-bind(menuTop);
		height: 50px;
		padding-top: 0;
		.item-text .tooltip-content {
			font-size: 14px;
			color: #2b2f36;
			font-weight: 400;
			transform: translateY(2px);
		}
	}
	.delegation-layout-header-botton.isSysAdmin {
		padding-top: 10px;
	}
}
</style>
